--- abbrlink: '' auto_hide: null banner: null categories: [] cover: null date: '2023-11-19T13:24:59.979865+08:00' description: null poster: caption: null color: null headline: null topic: null schedule: null tags: [] title: Notion Blog折腾记 updated: 2023-11-19T13:35:36.800+8:0 --- {% quot 前言 el:h2 %} 最近网上冲浪，发现一个特别精美的网站： {% link https://www.anzifan.com/ desc:true %} 因此特来折腾一下，此篇文章作为记录 {% quot 部署NotionNext el:h2 %} 部署的步骤其实非常简单： ### 1.拷贝Notion模板 {% link https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5 desc:true %} 点击上面的链接，登录你的Notion账号 在右上角点击**Duplicate**复制模板，如图所示。点击后会将这个博客数据模板复制到您的笔记空间中。 ![点击右上角的Duplicate，将模板复制到您的笔记中](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F35421745-2316-47bf-a6ce-7cd1aeb3deb3%2FUntitled.png?table=block&id=15646cce-2570-46d0-8c70-c56832db302b&t=15646cce-2570-46d0-8c70-c56832db302b) 点击右上角的Duplicate，将模板复制到您的笔记中 1. 在Notion笔记中：在页面右上角的菜单栏中，依次点击**Share**→**Published**→**Share To Web，**开启页面分享，获取**共享链接** * 如下图所示，点击右上角 **Share** ，在弹出窗口中点击 **Publish **→ **Share to web** (点击展开截图) ![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1fc010fe-32a5-4934-947b-fb1e076735bd%2FUntitled.png?table=block&id=586d2451-f192-449f-93d0-b7ce35e1e13d&t=586d2451-f192-449f-93d0-b7ce35e1e13d) 2. 复制**页面ID** 页面ID在您的共享链接中、域名中间的一串**32位字母与数字**。* 如下图所示： ![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6fd734be-198d-4764-8eb4-2a1755c5020b%2FUntitled.png?table=block&id=7ae734b0-fe29-43ba-a715-4aa3adea7c57&t=7ae734b0-fe29-43ba-a715-4aa3adea7c57) * 页面ID注意,其中**标红加粗**下划线部分才是**页面ID**！ 请将您的**页面ID**记录下来，后续会用到。 ### 2.vercel部署 首先先fork下方仓库 {% link https://github.com/tangly1024/NotionNext/fork desc:true %} 导入代码 1. 点击下方创建新项目 {% link https://vercel.com/new desc:true %} 2. 在代码仓库列表中选择导入**NotionNext** ![2.点击导入您的NotionNext项目](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F45b7938f-4824-40ae-ae4f-0237990c71a4%2FUntitled.png?table=block&id=2405a6af-7404-41df-b31e-1f73909cf94c&t=2405a6af-7404-41df-b31e-1f73909cf94c) 点击导入您的NotionNext项目 **💡** 注意：这里步骤放慢些，**不要急着**点击页面上的**Deploy**按钮，先看下方教程。 3. 配置页面ID并部署 4. 点击**Environment Variables**（环境变量），并添加一个属性名称为`NOTION_PAGE_ID`**，**值为步骤一获取的**页面ID**。 例如，我的页面ID是：`02ab3b8678004aa69e9e415905ef32a5`，则配置如下： | 属性名称 Name | 属性值 Valve | | ---------------- | -------------------------------- | | NOTION\_PAGE\_ID | 02ab3b8678004aa69e9e415905ef32a5 | ![左侧填写 NOTION_PAGE_ID ， 右侧填写 页面ID的值](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd0a1c190-4da7-4bb5-b418-a87c82c1d00b%2FUntitled.png?table=block&id=73636a25-a2e4-4384-9f09-5f2c2ccdc70e&t=73636a25-a2e4-4384-9f09-5f2c2ccdc70e) 左侧填写 NOTION_PAGE_ID ， 右侧填写 页面ID的值 填写后要点击右边的`Add`按钮确认添加 5. 点击`Deploy`按钮，静候两分钟等待部署。 ![1.点击Deploy进行自动部署](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F59f7f49f-f6fa-4406-838d-9dcfe97ef028%2FUntitled.png?table=block&id=eddb8f97-50c4-4761-a787-18e44396d51e&t=eddb8f97-50c4-4761-a787-18e44396d51e) 点击Deploy进行自动部署 6. 在部署完成页面，点击`Go to Dashboard`访问控制台 ![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff36b1f60-f19c-484f-a5d5-bf0f683938c3%2FUntitled.png?table=block&id=b17d7f79-9861-447c-bacb-3709c76c4668&t=b17d7f79-9861-447c-bacb-3709c76c4668) 7. 在控制台右上角的`Visit`按钮访问您的站点。或在DOMAINS中获取您的网站地址 ![2.在Vercel控制台中找到访问地址](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F88d76586-2965-4a0a-8c34-519defe654d1%2FUntitled.png?table=block&id=b57c3e3c-fa52-4bc1-9d20-c6ba4edfee42&t=b57c3e3c-fa52-4bc1-9d20-c6ba4edfee42) 在Vercel控制台中找到访问地址 当然，除此之外、您还可以选择[Zeabur部署](https://notion-next.zeabur.app/article/deploy-on-zeabur)、[服务器本地部署](https://tangly1024.com/article/deploy-notion-next-on-vps)、[导出静态网页](https://github.com/tangly1024/NotionNext/issues/116)、[Docker容器化](https://github.com/tangly1024/NotionNext/blob/main/Dockerfile)、[CloudFlare部署](https://www.haixin.io/article/notion-next-on-cf)等方案，不过这些都要求您有一定的技术基础。